<template>
  <div class="main container-fluid">
    <div class="row justify-content-between align-items-center mb-4">
      <div class="col-auto text-start">
        <img class="img" src="../assets/images/logo@3x.png" alt="Logo" />
        <h1 class="title">System modularization options</h1>
      </div>
      <div class="col-auto text-center d-flex align-items-center">
        <!-- 语言切换 -->
        <span style="margin-right: 10px">{{ $t('navbar.language') }}:</span>
        <el-select style="width: 100px; margin-right: 10px" v-model="language" :placeholder="$t('navbar.language')" @change="changeLanguage">
          <el-option :label="$t('navbar.zh-cn')" value="zh"></el-option>
          <el-option :label="$t('navbar.en')" value="en"></el-option>
          <el-option :label="$t('navbar.vi')" value="vi"></el-option>
        </el-select>

        <!-- <img src="../assets/images/Group1.png" alt="User Avatar" class="me-2" />   -->
        <el-avatar class="me-2">
          <AuthImage :imgUrl="avatar" />
        </el-avatar>

        <span>{{ userInfo?.nickName }}</span>
        <el-dropdown size="large" style="position: relative">
          <span class="el-dropdown-link">
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div class="row">
      <img class="img1 d-none d-md-block" src="../assets/images/Group.png" alt="" />
      <div class="col-md-7">
        <div class="d-flex mb-3">
          <h1 @click="nunberMethods(1)" :class="{ font: selectedIndex !== 0, 'font-active': selectedIndex === 0 }">
            <span :class="{ number: selectedIndex !== 0, 'number-active': selectedIndex === 0 }">01</span>
          </h1>
          <h1 @click="nunberMethods(2)" :class="{ font: selectedIndex !== 1, 'font-active': selectedIndex === 1 }">
            <span :class="{ number: selectedIndex !== 1, 'number-active': selectedIndex === 1 }">02</span>
          </h1>
          <h1 @click="nunberMethods(3)" :class="{ font: selectedIndex !== 2, 'font-active': selectedIndex === 2 }">
            <span :class="{ number: selectedIndex !== 2, 'number-active': selectedIndex === 2 }">03</span>
          </h1>
        </div>

        <div class="row">
          <div v-for="(item, index) in listSystem" :key="index" class="col-12 col-md-6 col-lg-4 mb-4">
            <div class="bottom p-3">
              <div class="d-flex align-items-center justify-content-between mb-3">
                <img style="width: 50px; height: 50px" :src="item?.url" alt="" />
                <img style="width: 50px; height: 50px" :src="item?.name" alt="" />
              </div>
              <div style="margin-top: 2rem">
                <h1 class="system">{{ item.name1 }}</h1>
                <h1 class="system1">{{ item.name2 }}</h1>
              </div>

              <div style="margin-top: 4rem" class="d-flex align-items-center justify-content-between">
                <button @click="inSyster(item)">进入</button>
                <h1 class="system3">{{ item.name3 }}</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'SelectSystem'
}
</script>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useUserInfoStore, getUserInfo } from '@/stores/userInfo'
import { useI18n } from 'vue-i18n'
import service from '@/utils/request'
import Group1 from '@/assets/icon/Group1.png'
import Group2 from '../assets/icon/Group2.png'
import Group3 from '../assets/icon/Group3.png'
import Group4 from '../assets/icon/Group4.png'
import Group5 from '../assets/icon/Group5.png'
import Group6 from '../assets/icon/Group6.png'
import Group7 from '../assets/icon/Frame.svg'
import router from '@/router'
import request from '@/utils/request'
import AuthImage from '@/components/ImagePreview/AuthImage.vue'

const { locale } = useI18n()
const language = ref(JSON.parse(sessionStorage.getItem('lang')) || '中文')

async function changeLanguage() {
  locale.value = language.value
  await service.post(`/system/user/profile/lang/${language.value}`)
  sessionStorage.setItem('lang', JSON.stringify(language.value))
  window.location.reload()
}
const userInfoStore = useUserInfoStore()
const userInfo = ref()
const avatar = ref()
onMounted(() => {
  getSystemList()
  getUserInfo().then((res) => {
    userInfo.value = res.user
    avatar.value = userInfo.value.avatar
  })
})
const system = ref('')
const systemList = ref([
  {
    name: '系统1',
    url: '1'
  },
  {
    name: '系统2',
    url: '2'
  },
  {
    name: '系统2',
    url: '3'
  },
  {
    name: '系统2',
    url: '4'
  },
  {
    name: '系统2',
    url: '5'
  }
])

const inSyster = async (item1: any) => {
  systemList.value.map(async (item: any, index: number) => {
    if (item1.name4 === item.url) {
      console.log(item.url)
      sessionStorage.setItem('system', item.url)
      await userInfoStore.getInfo()
      router.push('/index')
    }
  })
}

const logout = () => {
  userInfoStore.logout()
  router.push('/login')
}

const selectedIndex = ref(0)

const nunberMethods = (font: number) => {
  selectedIndex.value = font - 1
}

const listSystem = ref([])
const routersList = ref([])
const getSystemList = async () => {
  const routers = await request.get<any, any>(`/system/menu/getSystems`)
  routersList.value = routers.data
  if (routers.code === 200) {
    listSystem.value = routers.data.map((item: any, index: number) => ({
      url: [Group1, Group2, Group3, Group4, Group5, Group6][index] || Group1,
      name: Group7,
      name1: item.meta.title,
      name2: item.meta.titleEn,
      name3: String(index + 1).padStart(2, '0'),
      name4: item.path
    }))
    console.log(listSystem.value)
  }
}
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'MyCustomFont'; /* 你的字体名称 */
  src: url('../assets/fontSize/Jaro-Regular.ttf') format('truetype'); /* TrueType 格式 */
  font-weight: normal; /* 字体的粗细，例如 normal, bold, 400, 700 */
  font-style: normal; /* 字体的样式，例如 normal, italic */
}
html,
body {
  height: 100%; /* 使html和body都占满页面 */
  margin: 0; /* 清除默认的margin */
}

.main {
  background: linear-gradient(225deg, #ff8222 0%, #ffaf5f 100%);
  min-height: 100vh; /* 设置为最小高度 */
  padding: 20px 30px;
}

.img1 {
  margin-top: 30px;
  width: 430px;
  height: 710px;
  border-radius: 20px 20px 20px 20px;
}

.img {
  width: 240px;
  height: 40px;
}

.title {
  width: 281px;
  height: 28px;
  font-family: Inter, Inter;
  font-weight: 500;
  font-size: 13px;
  color: #364770;
  line-height: 28px;
  letter-spacing: 3px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.font {
  width: 120px;
  height: 51px;
  background: #000000;
  border-radius: 100px 100px 100px 100px;
  border: 1px solid #000000;
  font-family: Jaro, Jaro;
  color: white;
  text-align: center;
  line-height: 42px;
  margin-left: 15px;
  cursor: pointer;
}

.font {
  width: 120px;
  height: 51px;
  border-radius: 100px;
  border: 1px solid #000000;
  font-family: Jaro, sans-serif; /* 确保 Jaro 字体已正确加载 */
  color: black; /* 默认字体颜色 */
  text-align: center;
  line-height: 42px;
  margin-left: 15px;
  cursor: pointer; /* 显示手型 */
  background: transparent; /* 默认没有背景色 */
}

.font-active {
  width: 120px;
  height: 51px;
  background: #000000; /* 选中时的背景色 */
  border-radius: 100px;
  border: 1px solid #000000;
  font-family: Jaro, sans-serif; /* 确保 Jaro 字体已正确加载 */
  color: white; /* 选中时的字体颜色 */
  text-align: center;
  line-height: 42px;
  margin-left: 15px;
  cursor: pointer; /* 显示手型 */
}

.number {
  width: 32px;
  height: 28px;
  font-weight: 400;
  font-size: 36px;
  color: black; /* 默认字体颜色 */
  line-height: 28px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  font-family: 'MyCustomFont', sans-serif; /* 应用 Jaro 字体 */
}

.number-active {
  width: 32px;
  height: 28px;
  font-family: 'MyCustomFont', sans-serif; /* 确保 Jaro 字体已正确加载 */
  font-weight: 400;
  font-size: 36px;
  color: #ffffff; /* 选中时的字体颜色 */
  line-height: 28px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.bottom {
  height: 307px;
  background: #ffffff;
  border-radius: 35px 35px 35px 35px;
  margin-left: 15px;
  margin-top: 15px;
  padding: 5px 15px;
}

.system {
  height: 28px;
  font-family: Inter, Inter;
  font-weight: bold;
  font-size: 30px;
  color: #303133;
  line-height: 28px;
  font-style: normal;
  text-transform: none;
}

.bottom:hover {
  transform: translateY(-5px);
}

.system1 {
  height: 28px;
  font-family: Inter, Inter;
  font-weight: 400;
  font-size: 20px;
  color: #303133;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.system3 {
  width: 32px;
  height: 28px;
  font-family: 'MyCustomFont', sans-serif; /* 确保 Jaro 字体已正确加载 */
  font-weight: 400;
  font-size: 36px;
  color: black; /* 选中时的字体颜色 */
  line-height: 28px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

button:hover {
  width: 191px;
  height: 51px;
  background: #000000;
  border-radius: 100px 100px 100px 100px;
  font-family: Inter, Inter;
  font-weight: normal;
  font-size: 20px;
  color: #ffffff;
  line-height: 28px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
}

button {
  width: 191px;
  height: 51px;
  border-radius: 100px 100px 100px 100px;
  background-color: #ffffff;
  border: 1px solid #000000;
  font-family: Inter, Inter;
  font-weight: normal;
  font-size: 20px;
  color: #000000;
  line-height: 28px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

:deep(.el-icon) {
  color: black;
  font-size: 17px;
}

:deep(.el-dropdown-link) {
  all: unset; /* 取消所有继承的样式 */
}
</style>
